<template>
  <div class="home">
    <!-- 1. 导航栏 -->
    <van-nav-bar>
      <!-- 自定义左侧 -->
      <template #left>
        <div class="logo"></div>
      </template>

      <!-- 自定义右侧插件 -->
      <template #right>
        <van-button @click="$router.push('/search')" class="search-btn" icon="search" round type="primary"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 2. tab栏 - 显示频道 -->
    <van-tabs class="channel-tabs"  v-model="active">

      <van-tab v-for="(item,index) in ownChannels" :key="item.id" :title="item.name">
          <!-- 3. 下面的新闻列表 -->
          <!-- 如果代码都写在这里，不利于后期维护，所以最好封装成一个组件 -->
          <articleList ref="artList" :channel_id="item.id"/>
      </van-tab>

      <!-- 用来放图标的div -->
      <div class="icon-box">
        <van-icon @click="show=true" name="wap-nav" />
      </div>
    </van-tabs>

      <!-- 
         对于我们封装的组件而言，$event不是事件对象，
         而是我们从子组件里传过来的值，我们传过来是什么它就是什么 
         在本项目中，这个$event,就是子组件里传过来的index（下标）
    -->
    <van-action-sheet v-model="show" title="频道管理">
      <!-- <channel-edit 
        :ownChannels="ownChannels" 
        :allChannels="allChannels"
        :value="active"
        @input="active = $event"
        @close="show=false"
      /> -->

      <channel-edit 
        :ownChannels="ownChannels" 
        :allChannels="allChannels"
        v-model="active"
        @close="show=false"
      />
    </van-action-sheet>
  </div>
</template>

<script>
// 导入接口
import { userChannelsAPI, channelsAllAPI } from "@/api";
// 导入新闻列表组件
import articleList from './articleList.vue'
import channelEdit from "./channelEdit.vue";

export default {
  name: 'home',
  // 注册成子组件
  components: {
    articleList,
    channelEdit
  },
  data() {
    return {
      active: 0,
      // 保存用户自己的频道
      ownChannels: [],
      // 保存所有频道的数组
      allChannels: [],
      show: false,
    };
  },


  async created() {

    // 发请求，获取用户自己的频道
    let res = await userChannelsAPI()
    this.ownChannels = res.data.data.channels

    // 发请求，获取所有频道
    let res2 = await channelsAllAPI()
    this.allChannels = res2.data.data.channels
  },

  destroyed () {
    console.log('home销毁了')
  }
};
</script>

<style scoped lang="less">
.logo {
  width: 120px;
  height: 100%;
  // 因为@在less有特殊含义，所以如果你想让@代表src目录，前面加一个~代表转义
  background: url(~@/assets/logo.png) no-repeat center / contain;
}

.search-btn {
  width: 100px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;

  .van-icon-search {
    color: #fff;
  }
}

// 频道栏
.channel-tabs {
  position: relative;

  // 包tab栏的盒子
  ::v-deep {
    .van-tabs__wrap {
      width: 345px;
    }
  }

  // 图标
  .icon-box {
    position: absolute;
    top: 5px;
    right: 0;
    background-color: #fff;

    .van-icon-wap-nav {
      font-size: 30px;
    }
  }
}
</style>